<template>
  <div class="home-container">
    <a-card title="欢迎使用账户系统">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-statistic title="总用户数" :value="statistics.totalUsers">
            <template #prefix>
              <UserOutlined />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="8">
          <a-statistic title="活跃用户" :value="statistics.activeUsers">
            <template #prefix>
              <TeamOutlined />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="8">
          <a-statistic title="今日新增" :value="statistics.todayNew">
            <template #prefix>
              <UserAddOutlined />
            </template>
          </a-statistic>
        </a-col>
      </a-row>
    </a-card>

    <a-card title="快捷功能" style="margin-top: 24px">
      <a-space :size="16">
        <a-button type="primary" @click="handleNavigate('/account')">
          <template #icon>
            <UserOutlined />
          </template>
          账户管理
        </a-button>
        <a-button @click="handleNavigate('/settings')">
          <template #icon>
            <SettingOutlined />
          </template>
          系统设置
        </a-button>
      </a-space>
    </a-card>

    <a-card title="系统公告" style="margin-top: 24px">
      <a-list :data-source="announcements">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :description="item.date">
              <template #title>
                {{ item.title }}
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  UserOutlined,
  TeamOutlined,
  UserAddOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 统计数据
const statistics = ref({
  totalUsers: 1234,
  activeUsers: 856,
  todayNew: 23
})

// 公告数据
const announcements = ref([
  { title: '系统维护通知', date: '2025-10-20' },
  { title: '新功能上线', date: '2025-10-18' },
  { title: '安全更新提醒', date: '2025-10-15' }
])

// 导航函数
const handleNavigate = (path) => {
  router.push(path)
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
}
</style>